import React from 'react';
import { Box, Grid, GridItem, MainButton, makeToast, Text, ThemeColorType } from '@nova-hf/ui';
import { useTranslation } from 'beta/utils/i18n';
import { useSettingsBetaQuery, useUpdateSettingBetaMutation } from 'typings/graphql';

import { StillingarLoader } from '../components/StillingarLoader';
import { ToggleSetting } from '../components/ToggleSetting';

type AbroadSettingsContainerProps = {
  subscriptionId: string;
  color: ThemeColorType;
};

const AbroadSettingsContainer = ({ subscriptionId, color }: AbroadSettingsContainerProps) => {
  const { t } = useTranslation('stillingar');
  const [toggleSetting] = useUpdateSettingBetaMutation();
  const { data, loading, error, refetch } = useSettingsBetaQuery({
    variables: {
      input: {
        subscriptionId: subscriptionId ?? '',
      },
    },
  });

  const settings = data?.subscription?.settings;

  const onToggle = async (id: string, onOff: boolean) => {
    try {
      await toggleSetting({
        variables: {
          input: {
            on: !onOff,
            settingId: id,
            subscriptionId: subscriptionId,
          },
        },
      });
      refetch();
    } catch (error) {
      if (error instanceof Error) {
        makeToast.danger(t('abroadSettings.updateSettingsError'), error.message);
      }
    }
  };

  if (!data || error) return null;
  if (loading) return <StillingarLoader />;

  return (
    <Box>
      {settings
        ?.filter(
          (s) =>
            s.settingId === 'ENABLESMSALERTWHENDATALOW' ||
            s.settingId === 'INTERNETABROAD' ||
            s.settingId === 'FOREIGNROAMING' ||
            s.settingId === 'ROAMINGGPRS' ||
            s.settingId === 'ROAMINGZONE35' ||
            s.settingId === 'FERDAPAKKI',
        )
        .map((setting) => (
          <Box key={setting.settingId} display="flex" flexDirection="column" marginBottom={6}>
            <Grid gridTemplate={{ sm: 6, lg: 2 }} columnGap={{ sm: 3, lg: 2 }} alignItems="center">
              <GridItem gridColumn={{ sm: 'span6', lg: 'span1', xl: 'span1' }}>
                <Text variant="pMediumBold">{setting.title}</Text>
                <Text variant="pMediumRegular">{setting.statusText}</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span6', lg: 'span1', xl: 'span1' }}>
                <Box display="flex" width="100%" justifyContent="flex-end">
                  <ToggleSetting
                    onOff={setting.on}
                    onToggle={() => onToggle(setting.settingId, setting.on)}
                    color={color}
                  />
                </Box>
              </GridItem>
            </Grid>
            {setting.settingId === 'FOREIGNROAMING' && (
              <Box width={['10/12', '8/12', '5/12', '4/12']} marginTop={2}>
                <MainButton
                  renderAs="a"
                  text="Skoða verðskrá"
                  icon="longArrowRight"
                  href="https://www.nova.is/farsimi/utlond"
                  openInNewTab
                  colorScheme="white"
                  dottedShadow="none"
                />
              </Box>
            )}
          </Box>
        ))}
    </Box>
  );
};

export default AbroadSettingsContainer;